<template>
  <el-breadcrumb>
    <el-breadcrumb-item>统计数据管理</el-breadcrumb-item>
    <el-breadcrumb-item>其他数据统计</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="container">
    <div class="block">
      <el-date-picker
          v-model="value3"
          type="year"
          placeholder="选择需求年份"
      />
      <el-button type="primary" @click="onSure">生成报告</el-button>
    </div>
  </div>
  <el-card style="margin-top: 20px; width: 60%; margin-left: 0;">
    <div ref="pieChart" style="width: 100%; height: 400px;"></div>
  </el-card>
</template>

<script setup>
import { ref, inject, onMounted } from "vue";
import * as echarts from "echarts";

const axios = inject("axios");

const aqiCount = ref(0);
const aqiGoodCount = ref(0);
const provinceCoverage = ref(0);
const cityCoverage = ref(0);

const pieChart = ref(null);
let chartInstance = null;

// 年份的获取
const value3 = ref(new Date(2025, 0, 1));
const aqiTrendTotalArr = ref([]);

// 生成报告按钮事件
const onSure = () => {
  if (!value3.value) {
    console.log('未选择年份');
    return;
  }
  const year = value3.value.getFullYear();
  console.log('当前选择的年份:', year);

  axios.get("/statistics/report", {
    params: { year: year },
    responseType: 'blob' // 关键：告诉 Axios 返回的是二进制数据
  })
      .then((response) => {
        // 1. 获取 Blob 数据
        const blob = new Blob([response.data], {
          type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' // Word 文档 MIME 类型
        });

        // 2. 生成下载链接
        const downloadUrl = window.URL.createObjectURL(blob);

        // 3. 创建 `<a>` 标签并触发下载
        const a = document.createElement('a');
        a.href = downloadUrl;
        a.download = `空气质量报告_${year}.docx`; // 设置下载文件名
        document.body.appendChild(a);
        a.click();

        // 4. 释放 URL 对象
        window.URL.revokeObjectURL(downloadUrl);
        document.body.removeChild(a);
      })
      .catch((error) => {
        console.error('请求出错:', error);
      });
};

const fetchData = () => {
  axios.post("statistics/getAqiCount").then(res => {
    aqiCount.value = res.data;
    updateChart();
  });
  axios.post("statistics/getAqiGoodCount").then(res => {
    aqiGoodCount.value = res.data;
    updateChart();
  });
  axios.post("statistics/getProvinceCoverage").then(res => {
    provinceCoverage.value = res.data;
    updateChart();
  });
  axios.post("statistics/getCityCoverage").then(res => {
    cityCoverage.value = res.data;
    updateChart();
  });
};

const updateChart = () => {
  if (!chartInstance) return;
  chartInstance.setOption({
    title: {
      text: '其他数据统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '统计数据',
        type: 'pie',
        radius: '60%',
        data: [
          { value: aqiCount.value, name: '空气质量检测总数量' },
          { value: aqiGoodCount.value, name: '空气质量检测良好数量' },
          { value: provinceCoverage.value, name: '省网格覆盖率' },
          { value: cityCoverage.value, name: '大城市网格覆盖率' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  });
};

onMounted(() => {
  chartInstance = echarts.init(pieChart.value);
  fetchData();
});
</script>

<style scoped>
.container {
  margin-top: 20px;
  margin-left: 0;
  display: flex;
  align-items: center;
}

.block {
  display: flex;
  align-items: center;
  gap: 10px;
}

.el-card {
  margin-top: 20px;
  width: 60%;
  margin-left: 0;
  /* 让卡片左对齐 */
}
</style>